import { View } from "@tarojs/components";
import { AbstractNavigator, Icon, ImageTextCard } from "@/components";
import { convertTimeToAmPm, formatDateString } from "@/utils";
import { ItemListingCardShape } from "@/data/shared/entityShapes";
import { PagesNavigation } from "@/data/pages/pagesTypes";
import style from "./index.module.scss";
import { ImageCardTypes } from "../basic/ImageTextCard";

interface AllListingProps {
  cardList: Array<
    ItemListingCardShape & {
      link: PagesNavigation;
      grayedOut?: boolean;
      waitingListAvailable?: boolean;
      lineUpId?: number;
    }
  >;
  cardType?: Extract<
    ImageCardTypes,
    `vertical-list-card${"-spread" | "-center" | ""}`
  >;
  removeCallback?: Function;
  onItemClick?: Function;
}

const C20AllListing = ({
  cardList,
  cardType = "vertical-list-card",
  removeCallback,
  onItemClick,
}: AllListingProps) => {
  const remove = async (id, type, i) => {
    (await removeCallback!(id, type, i)) === false ? true : false;
  };

  return (
    <>
      {cardList.map((cardData, index) => (
        <View
          className={style["card-container"]}
          key={`${index}${cardData.link}-${cardData.id} ${
            cardData.date && cardData.date
          } ${cardData.startDate && cardData.startDate} ${
            cardData.endDate && cardData.endDate
          } ${cardData.startTime && cardData.startTime}${
            cardData.endTime && cardData.endTime
          }`}
        >
          <AbstractNavigator
            url={cardData.link}
            onClick={() => onItemClick && onItemClick(cardData)}
          >
            <View
              style={
                cardData.grayedOut
                  ? { filter: "grayscale(1)", opacity: 0.4 }
                  : {}
              }
            >
              <ImageTextCard
                title={cardData.name}
                imagePath={cardData.imagePath}
                tag={cardData.tagText}
                themeColor={cardData.themeColor}
                infoField={
                  cardData.upperRightText
                    ? {
                        text: cardData.upperRightText,
                        color: cardData.themeColor,
                      }
                    : null
                }
                type={cardType}
                date={
                  cardData.date ||
                  (cardData.startTime && cardData.endTime) ||
                  (cardData.startDate && cardData.endDate)
                    ? {
                        date: cardData.date
                          ? formatDateString(cardData.date)
                          : undefined,
                        time:
                          cardData.startTime && cardData.endTime
                            ? `${convertTimeToAmPm(
                                cardData.startTime
                              )} - ${convertTimeToAmPm(cardData.endTime)}`
                            : cardData.startDate && cardData.endDate
                            ? `${cardData.startDate} - ${cardData.endDate}`
                            : "",
                      }
                    : null
                }
                cost={cardData.price}
                waitingListAvailableText={
                  cardData.waitingListAvailable
                    ? "已有席位释放，即刻前往预约"
                    : null
                }
                priceAtBottom
              />
            </View>
          </AbstractNavigator>
          {removeCallback && (
            <Icon
              type="Delete"
              className={style.delete}
              onClick={(event) => {
                event.stopPropagation();
                remove(
                  cardData.id || cardData.productId || cardData.lineUpId,
                  cardData.mainType,
                  index
                );
              }}
            />
          )}
        </View>
      ))}
    </>
  );
};

export default C20AllListing;
